<template>
    <div class="home">
        <home-header />
        <template v-if="!isClick">
            <home-center :deviceCount="deviceCount">
                <iframe :src="url1" class="wrap" />
            </home-center>
            <home-bottom :plan="plan" :message="message" :maintenanceCount="maintenanceCount" :repairCount="repairCount" />
            <div class="bg bg-top"></div>
            <div class="bg bg-bottom"></div>
        </template>
        <template v-else>
            <iframe :src="url" />
        </template>
    </div>
</template>

<script setup>
import { useScalePage } from "@/hooks/useScalePage.js";
import homeHeader from "./cpn/homeHeader.vue";
import homeCenter from "./cpn/homeCenter.vue";
import homeBottom from "./cpn/homeBottom.vue";
import { mainStore } from "@/store/main";
import { getTodayPlan, getMaintenanceCount, getDeviceCount, getRepairStatistics, getMessage, getEquipmentCode, getOverallScene } from "@/service/api/home.js";
import { ref, onUnmounted } from "vue";
import dayjs from "dayjs";

const store = mainStore();
const plan = ref([]);
const message = ref([]);
const maintenanceCount = ref({});
const deviceCount = ref({});
const repairCount = ref([]);
const isClick = ref(true);
const url1 = ref("");
const url = ref("");
let host = "";
await getOverallScene().then((res) => {
    if (res.code === 200) {
        host = res.data.host;
        url.value = `${res.data.host}#${res.data.overallScene}`;
    }
});
async function handlerClick(data) {
    console.log(data);
    if (data.type === "dashboard") {
        isClick.value = true;
        return;
    }
    const res = await getEquipmentCode(data.data.id);
    store.equipment.equipmentId = res.data.id;
    store.equipment.equipmentCode = res.data.code;
    url1.value = `${host}#${res.data?.singleScenario || "/gantry"}?id=${data?.data?.id || 0}`;
    getMessage(store.equipment.equipmentId).then((res) => {
        if (res.code === 200) message.value = res.data;
    });
    getMaintenanceCount(store.equipment.equipmentId).then((res) => {
        if (res.code === 200) {
            maintenanceCount.value = {
                bar: [res.data.alreadyRepair, res.data.treatImplement],
                succeedCount: res.data.succeed,
                total: res.data.total
            };
        }
    });
    getDeviceCount(store.equipment.equipmentCode).then((res) => {
        if (res.code === 200) deviceCount.value = res.data;
    });
    getRepairStatistics(store.equipment.equipmentId).then((res) => {
        if (res.code === 200) repairCount.value = res.data.reverse();
    });
    getTodayPlan({
        equipmentId: store.equipment.equipmentId,
        startDate: dayjs().format("YYYY-MM-DD"),
        endDate: dayjs().format("YYYY-MM-DD")
    }).then((res) => {
        if (res.code === 200) plan.value = res.data[0]?.itemList;
    });
    isClick.value = false;
    useScalePage();
}
window.addEventListener("message", ({ data }) => {
    handlerClick(data);
});

// function getEquipmentCode(id) {
//     let code = "";
//     switch (id) {
//         case 1:
//             code = "2103-060";
//             break;
//         case 2:
//             code = "2103-061";
//             break;
//         case 3:
//             code = "2103-062";
//             break;
//         case 4:
//             code = "2103-063";
//             break;
//         case 5:
//             code = "2106-198";
//             break;
//     }
//     return code;
// }
onUnmounted(() => {
    document.body.style = "";
    document.getElementsByTagName("html")[0].style = "";
});
useScalePage();
</script>

<style lang="less" scoped>
.home {
    position: relative;
    width: 100%;
    height: 100%;
    // background: url("@/assets/image/home/home-bg.png") center/100% 100% no-repeat;
    color: #fff;
    font-size: 16px;
    iframe {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border: none;
    }
    .wrap {
        width: 1920px;
        height: 990px;
    }
    .bg {
        position: absolute;
        left: 0;
        width: 100%;
    }
    .bg-top {
        z-index: 13;
        top: 0;
        height: 140px;
        background: linear-gradient(180deg, #1b3646 0%, #1b3646 20%, rgba(27, 54, 70, 0) 100%);
    }
    .bg-bottom {
        z-index: 11;
        bottom: 0;
        height: 320px;
        background: linear-gradient(0deg, #1b3646 0%, #1b3646 65%, rgba(27, 54, 70, 0) 100%);
    }
    .thumbnails {
        position: absolute;
        top: -310px;
        right: -340px;
        scale: 0.13;
        z-index: 99;
    }
}
</style>
